<template>
  <div class="index">
    <div class="center">
      <left></left>
      <div class="right">
        <top></top>
        <div class="hei10"></div>
        <div class="team">
          <div class="powertop">
            <router-link class="powertopli " to="/xiaoxitongzhi">订单变更({{nodonum1}})</router-link>
            <router-link class="powertopli "
              to="/xiaoxitongzhi/yichangchuli">异常处理({{nodonum2}})</router-link>
            <router-link class="powertopli powertopact " to="/xiaoxitongzhi/yujing">预警({{nodonum3}})</router-link>
          </div>
        </div>
        <div class="cons" v-loading="loading">
          <el-button type="primary" plain round @click="dispose">批量处理</el-button>
          <div class="list" style="background: rgb(246, 246, 246); line-height: 35px; margin-top: 20px;">
            <div class="td"><input type="checkbox" @change="quanxuan" value="0" v-model="quanxuana" style="position: relative; top: 2px;" ></input>   全选</div>
            <div class="td">消息</div>
            <div class="td">时间</div>
            <div class="td">操作</div>
          </div>
          <div class="list" v-for="item in list" :key="item.id" v-bind:class="[item.status == 1 ? 'act' : 'no']">
            <div class="td"><input type="checkbox" :value="item.id" @change="danxuan" v-model="danxuans" /></div>
            <div class="td" style="cursor: pointer;" @click="kai(item.data)"><i
                class="el-icon-message-solid"></i>{{item.content}}</div>
            <div class="td">{{item.created_at}}</div>
            <div class="td">
              <span class="chuli" v-if="item.status == 1?true:false">处理中...</span>
              <el-button type="primary" size="mini" plain round  @click="status(item.id)" v-if="item.status == 1?true:false">处理完成
              </el-button>
              <div class="td" v-if="item.status == 1?false:true" style="color: #229453;">已处理</div>
            </div>
          </div>
          <el-pagination background layout="total,prev, pager, next" :current-page="page" @current-change="fanye"
            :page-size="pagesize" :total="total"></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import axios from "axios";
  import top from '@/components/top.vue'
  import left from '@/components/left.vue'
  import foot from '@/components/foot.vue'
  export default {
    components: {
      "left": left,
      "top": top,
      'foot': foot
    },
    name: 'yujing',
    data() {
      return {
        list: {

        },
        total: 0,
        pagesize: 20,
        page: 1,
        loading: true,
        nodonum1: "",
        nodonum2: "",
        nodonum3: "",

        danxuans: [],
        quanxuana: false,
        quanxuans: [],
      }
    },
    created() {
      this.getlist()
      var that = this
      //单纯获取数字用
      axios.get('/api/system/message/list?page=' + this.page + '&page_size=' + this.pagesize + '&class=1')
        .then(response => {
          if (response.data.msg.code == 0) {
            that.nodonum1 = response.data.data.undealed_count
          } else {
            that.$message.error(response.data.msg.info);
          }
        })
      //单纯获取数字用
      axios.get('/api/system/message/list?page=' + this.page + '&page_size=' + this.pagesize + '&class=2')
        .then(response => {
          if (response.data.msg.code == 0) {
            that.nodonum2 = response.data.data.undealed_count
          } else {
            that.$message.error(response.data.msg.info);
          }
        })
    },
    methods: {
      kai: function(data) {
        this.$alert(data, '数据仅供参考，请自行筛选', {
          confirmButtonText: '确定',
          callback: action => {

          }
        });
      },
      //全选的ids集合
      ids: function() {
        var checkids = [];
        for (var i in this.list) {
          checkids.push(this.list[i].id);
        }
        this.quanxuans = checkids;
      },
      //点击全选
      quanxuan: function() {
        if (
          this.danxuans.length != this.quanxuans.length ||
          this.danxuans.length == 0
        ) {
          this.danxuans = this.quanxuans;
          this.quanxuana = true;
        } else {
          this.danxuans = [];
          this.quanxuana = false;
        }
      },
      //点击单选
      danxuan: function() {
        // this.choosearea.push(this.checkedarea)
        if (this.danxuans.length == this.quanxuans.length) {
          this.quanxuana = true;
        } else {
          this.quanxuana = false;
        }
      },
      //批量处理
      dispose: function() {
        const that = this
        if (this.danxuans == "") {
          this.$message.error("请选择要处理的订单");
          return false
        }
        var arr = "";
        for (var i in this.danxuans) {
          arr = arr + this.danxuans[i] + ",";
        }
        arr = arr.substring(0, arr.lastIndexOf(","));
        axios.post("/api/system/message/status", {
          status: 2,
          id: arr
        }).then(response => {
          if (response.data.msg.code == 0) {
            that.$message({
              message: `处理成功${response.data.data}条`,
              type: "success"
            });
            that.loading = true;
            that.getlist();
          }
        })
      },
      getlist: function() {
        this.danxuans = [];
        this.quanxuana = false
        var that = this
        axios.get('/api/system/message/list?page=' + this.page + '&page_size=' + this.pagesize + '&class=3')
          .then(response => {
            if (response.data.msg.code == 0) {
              that.list = response.data.data.data
              that.total = response.data.data.total
              that.nodonum3 = response.data.data.undealed_count
              that.ids()
              that.loading = false
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      },
      //翻页
      fanye: function(page) {
        this.loading = true
        this.page = page
        this.getlist()
      },
      status: function(id) {
        var that = this
        axios.post('/api/system/message/status', {
            status: 2,
            id: id
          })
          .then(response => {
            if (response.data.msg.code == 0) {
              that.$message({
                message: '修改状态成功！',
                type: 'success'
              });
              that.getlist()
            } else {
              that.$message.error(response.data.msg.info);
            }
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .index {


    .team {
      background: #F9F9F9;
    }

    .powertop {
      display: flex;
      width: 640px;
    }

    .powertopli {
      flex-basis: 160px;
      line-height: 45px;
      border-bottom: 3px #F9F9F9 solid;
      color: #727272;
      border-right: 1px #F9F9F9 solid;
      font-size: 14px;
      text-align: center;
    }

    .powertopact {
      background: #FFFFFF;
      border-bottom: 3px #2974FF solid;
    }

    .piliang {}

    .piliangxuan {
      padding: 3px 0;
    }

    .mesquanxuan {
      padding: 10px 30px 20px 0px;
      display: flex;
      font-size: 14px;
      background: #f4f4f4
    }

    .cons {

      margin: 20px;

      .list {
        display: flex;
        color: #727272;
        line-height: 45px;
        color: rgb(86, 86, 86);
        padding: 0 20px;
        border-bottom: 1px #EAEAEA solid;
        margin-top: -1px;

        .td {
          font-size: 14px;

          .chuli {
            padding: 0 10px;
          }
        }

        .td:nth-child(1) {
          flex: 1;
        }

        .td:nth-child(2) {
          flex: 6;
        }

        .td:nth-child(3) {
          flex: 1.2;
          padding-left: 20px;
        }

        .td:nth-child(4) {
          flex: 1;
          text-align: right;
        }
      }

      .el-pagination {
        text-align: right;
        margin: 20px 0
      }

      .act {
        color: #000;

        .el-icon-message-solid {
          color: #EEF7FF
        }
      }

      .no {
        color: #999;
      }
    }

  }
</style>
